var cpage = 1;

function pro_total_count(p) {
    showTableAndEcharts();
    cpage = p;
    pro_total_count_table();
    pro_total_count_echart();
}

function pro_total_count_table() {
    $.ajax({
        method: "POST",
        url: "proTotalCountByPage",
        data: {
            page: cpage
        },
        success: function (data) {
            $("#tip").html("<h3>各地区总操作量统计表格</h3>");
            $("#echart-tip").html("<h3>各地区总操作量统计图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>省份</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th><th>总量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            $.each(jsonArr, function (index, proTotalCount) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+proTotalCount.id+"</td><td>"+proTotalCount.province+"</td><td>"+proTotalCount.viewCount+"</td><td>"+proTotalCount.cartCount+
                        "</td><td>"+proTotalCount.parchaseCount+"</td><td>"+proTotalCount.totalCount+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+proTotalCount.id+"</td><td>"+proTotalCount.province+"</td><td>"+proTotalCount.viewCount+"</td><td>"+proTotalCount.cartCount+
                        "</td><td>"+proTotalCount.parchaseCount+"</td><td>"+proTotalCount.totalCount+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getproTotalCountPages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='6'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:pro_total_count("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:pro_total_count(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";

                    //只显示10个分页
                    if (pages <= 10) {
                        for (var i = 1; i<=pages; i++) {
                            if (cpage == i) {
                                page += "<li class='active'><a href='javascript:pro_total_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                            } else {
                                page += "<li><a href='javascript:pro_total_count("+i+")'>"+i+"</a></li>"
                            }
                        }
                    } else {
                        if (cpage <= 6) {
                            for (var i = 1; i<=10; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_total_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_total_count("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else if (cpage > 6 && (cpage+4) <= pages) {
                            for (var i = cpage-5; i<=cpage+4; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_total_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_total_count("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else {
                            for (var i = cpage-9; i<=cpage; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_total_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_total_count("+i+")'>"+i+"</a></li>"
                                }
                            }
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:pro_total_count("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:pro_total_count("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });
        }
    })
}

function pro_total_count_echart() {

    $.ajax({
        method: "POST",
        url: "proTotalCount",
        success: function (data) {

            //转换为json数组
            var jsonArr = JSON.parse(data);

            var viewData = [];
            var cartData = [];
            var parchaseData = [];
            var totalData = [];

            var max = 0;
            var min = 999999;
            var max_t = 0;
            var min_t = 9999999;
            $.each(jsonArr, function (index, proTotalCount) {
                if (max < proTotalCount.cartCount) {
                    max = proTotalCount.cartCount
                }
                if (min > proTotalCount.cartCount) {
                    min = proTotalCount.cartCount
                }
                if (max_t < proTotalCount.totalCount) {
                    max_t = proTotalCount.totalCount
                }
                if (min_t > proTotalCount.totalCount) {
                    min_t = proTotalCount.totalCount
                }
                var pro = proTotalCount.province;
                pro = pro.replaceAll("省", "");
                pro = pro.replaceAll("市", "");
                pro = pro.replaceAll("自治区", "");
                pro = pro.replaceAll("特别行政区", "");
                if (pro.length > 3) {
                    pro = pro.substring(0, 2);
                }
                viewData.push({name: pro, value: proTotalCount.viewCount});
                cartData.push({name: pro, value: proTotalCount.cartCount});
                parchaseData.push({name: pro, value: proTotalCount.parchaseCount});
                totalData.push({name: pro, value: proTotalCount.totalCount});
            });

            //清空原来的图表
            var size = 0;
            $("#dataEcharts div:gt(0)").remove();
            var all_data = [viewData, cartData, parchaseData, totalData];
            for (var i = 0; i < all_data.length; i++) {
                $("#dataEcharts").append('<div id='+'"main'+(i+1)+'" style="height: 400px; width: 700px"></div>');
                if (i !== 3) {
                    size = max / 5;
                } else {
                    size = max_t / 5;
                    min = min_t;
                }

                //中国地图开始
                var main = echarts.init(document.getElementById('main'+(i+1)), 'infographic');
                var name = i === 0? "浏览量": i === 1? "加入购物车量": i === 2? "销量" : "总操作量";
                var option = {
                    title: {
                        text: '各地区'+name+'统计',
                        textStyle: { color: 'black' },
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,
                        x: 'left',
                        y: 'bottom',
                        //layoutCenter:['30%','30%'],
                        splitList: [
                            // { start: size*5, end: size*6+100 },
                            { start: size*4, end: size*5+1000 },
                            { start: size*3-1000, end: size*4 },
                            { start: (min-size)*2, end: size*3-1000 },
                            { start: (min-size)+1000, end: (min-size)*2 },
                            { start: min-size, end: min-size+1000 }
                        ],
                        color: ['#FF0000', '#FFCC33', '#ffff00', '#00FFFF', '#33FF33']
                    },
                    series: [
                        {
                            name: '各地区操作量',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            data: all_data[i]
                        }
                    ]
                };

                main.setOption(option);
            }
        }
    });

}